<template>
  <el-button type="primary" size="default" @click="emit('setState', 1)" icon="ele-Plus" :disabled="!category3Id">添加SPU
  </el-button>
  <el-table border stripe :data="spuPageList" :style="{ margin: '30px 0' }">
    <el-table-column type="index" width="80" label="序号" />
    <el-table-column label="SPU名称" prop="spuName"></el-table-column>
    <el-table-column label="SPU描述" prop="description"></el-table-column>
    <el-table-column label="操作">
      <template v-slot="{ row, $index }">
        <el-button type="primary" size="small" @click="addSku(row)" title="添加SKU" icon="ele-Plus">
        </el-button>
        <el-button type="primary" size="small" @click="emit('setState', 1, row)" title="编辑SPU" icon="ele-Edit">
        </el-button>
        <el-button type="info" size="small" @click="" title="查看SKU" icon="ele-Warning"></el-button>
        <el-button type="danger" size="small" @click="deleteSpu(row)" title="删除SPU" icon="ele-Delete"></el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:page-size="limit" v-model:current-page="page" :pager-count="5" layout="prev, pager, next,sizes"
    :total="total" :page-sizes="[3, 5, 7, 9]" />
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { requestFindBySpuId, type SkuInfoListType } from "@/api/sku";



export default defineComponent({
  name: "SpuList",
});
</script>

<script setup lang="ts">
import { ref, watch } from "vue"
import { storeToRefs } from "pinia";
import useAttrStore from "@/stores/attr";
import { requestDeleteSpu, requestSpuList } from "@/api/spu"
import type { SpuInfoType } from "@/api/spu"
import { ElMessage } from "element-plus";

const limit = ref(3)
const page = ref(1)
const total = ref(0)

const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)
// 声明数据保存spu分页列表
const spuPageList = ref<SpuInfoType[]>([])
// 发送spu分页列表请求
const getSpuPageList = async () => {
  try {
    const result = await requestSpuList(page.value, limit.value, category3Id.value as number)
    // 将获取到的值给声明的数据
    spuPageList.value = result.records
    total.value = result.total
  } catch (e) {
    ElMessage.error("请求spu分页列表失败")
  }
}

// 监听category3Id的变化发送请求
watch(category3Id, () => {
  // 如果三级列表变为空
  if (category3Id.value === null) {
    spuPageList.value = [];
    total.value = 0;
    return;
  }
  getSpuPageList()
}, { immediate: true })

watch([page, limit], () => {
  getSpuPageList()
})

// 自定义事件传值切换组件
const emit = defineEmits<{
  ($event: "setState",
    state: number,
    row?: SpuInfoType
  ): void
}>()

// 删除单个spu
const deleteSpu = async (row: SpuInfoType) => {
  try {
    await requestDeleteSpu(row.id as number)
    // 重新发送请求
    getSpuPageList()
  } catch (e) {
    ElMessage.error("删除失败")
  }
}

//点击添加sku按钮,切换到skuForm
const addSku = (row: SpuInfoType) => {
  emit("setState", 2, row);
};

const dialogTableVisible = ref(false);
const skuList = ref<SkuInfoListType>([]);
//查看sku列表
const showDetail = async (row: SpuInfoType) => {
  dialogTableVisible.value = true;

  try {
    const result = await requestFindBySpuId(row.id as number);
    skuList.value = result;
  } catch (e) {
    ElMessage.error("查看Sku列表失败");
  }
};
</script>